<template>
  <div>
    <h1 v-if="!$route.query.row">添加兑换码</h1>
    <h1 v-else>修改兑换码</h1>
    <hr />
    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
      <el-form-item label="兑换码名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入兑换码名称"></el-input>
      </el-form-item>

      <el-form-item label="优惠券开始时间：" prop="begExp">
        <el-date-picker
          v-model="form.begExp"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="优惠券结束时间：" prop="endExp">
        <el-date-picker
          v-model="form.endExp"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="优惠券价格：" prop="price">
        <el-input
          v-model="form.price"
          placeholder="请输入优惠券价格"
        ></el-input>
      </el-form-item>
      <el-form-item label="优惠券数量：" prop="number">
        <el-input
          v-model="form.number"
          placeholder="请输入优惠券数量"
        ></el-input>
      </el-form-item>
      <el-form-item label="优惠券使用范围：" prop="usedRange">
        <el-checkbox-group class="clear" v-model="form.usedRange" :max="1">
          <el-checkbox
            v-for="item in groupList"
            :key="item.useId"
            :label="item.useId"
            v-model="item.checked"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        number: "",
        price: "",
        usedRange: [],
        begExp: "",
        endExp: "",
      },
      route: this.$route.query.row,
      //使用范围
      groupList: [
        {
          useId: 1,
          name: "全商城通用",
          checked: true,
        },
        {
          useId: 2,
          name: "代办理赔订单",
          checked: true,
        },
        {
          useId: 3,
          name: "自助理赔订单",
          checked: true,
        },
        {
          useId: 4,
          name: "代办保养订单",
          checked: false,
        },
      ],
      //表单验证
      rules: {
        name: [
          { required: true, message: "请输入兑换码名称", trigger: "blur" },
        ],
        begExp: [
          {
            required: true,
            message: "请选择优惠券开始日期",
            trigger: "change",
          },
        ],
        endExp: [
          {
            required: true,
            message: "请选择优惠券结束日期",
            trigger: "change",
          },
        ],
        usedRange: [
          {
            required: true,
            message: "请至少选择一个使用范围",
            trigger: "change",
          },
        ],
        price: [{ required: true, message: "请填写价格", trigger: "blur" }],
        number: [{ required: true, message: "请填写数量", trigger: "blur" }],
      },
    };
  },
  methods: {
    //新增和编辑提交
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.route) {
            this.$http({
              url: "/exchange/addExchange",
              method: "POST",
              data: {
                begExp: this.form.begExp,
                endExp: this.form.endExp,
                name: this.form.name,
                number: this.form.number,
                price: this.form.price,
                usedRange: this.form.usedRange[0],
              },
            })
              .then((res) => {
                console.log("请求成功：", res);
                this.$router.push("/cpscore/convertcode");
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              })
              .catch((err) => {
                console.log("请求失败：", err);
              });
          }else {
            this.$http({
              url: '/exchange/updateExchange',
              method: 'POST',
              data: {
                id: this.$route.query.row.id,
                begExp: this.form.begExp,
                endExp: this.form.endExp,
                name: this.form.name,
                number: this.form.number,
                price: this.form.price,
                usedRange: this.form.usedRange[0],
              }
            })
            .then((res) => {
                console.log("请求成功：", res);
                this.$router.push("/cpscore/convertcode");
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              })
              .catch((err) => {
                console.log("请求失败：", err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancel() {
      this.$router.push('/cpscore/convertcode')
    },
    //编辑某一个查询赋值
    giveInfo() {
      this.$http({
        url: "/exchange/selectById",
        method: "POST",
        params: {
          id: this.$route.query.row.id
        },
      }).then((res) => {
        console.log("请求成功：", res);
        let exchangeEmit = res.data.data;

        console.log("获取到的参数", exchangeEmit.usedRange);

        let aaa = exchangeEmit.usedRange;

        //使用范围处理
        if (aaa == 1) {
          console.log("获取到1了");
          this.form.usedRange.push(1);
        } else if (aaa == 2) {
          console.log("获取到2了");
          this.form.usedRange.push(2);
        } else if (aaa == 3) {
          console.log("获取到3了");
          this.form.usedRange.push(3);
        } else if (aaa == 4) {
          console.log("获取到4了");
          this.form.usedRange.push(4);
        }

        this.form.begExp = exchangeEmit.begExp;
        this.form.endExp = exchangeEmit.endExp;
        this.form.name = exchangeEmit.name;
        this.form.number = exchangeEmit.number;
        this.form.price = exchangeEmit.price;
        this.form.usedRange[0] = exchangeEmit.usedRange;
      })
      .catch((err) => {
        console.log('请求失败：', err);
      })
    },
  },
  created() {
    if(this.route) {
      this.giveInfo();
    }
  }
};
</script>

<style lang="scss" scoped>
h1 {
  margin-bottom: 10px;
}

.el-form {
  margin-top: 15px;
}

.el-checkbox-group {
  float: left;
}

.checkboxAll {
  float: left;
  margin-right: 20px;
}

.el-input {
  width: 300px;
}
</style>